<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>后台管理系统</title>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<link href='${pageContext.request.contextPath}/resources/css/index.css' rel="stylesheet">
</head>
<body>
	<nav class="nav_top" role="navigation">
		<div class="logo">
			<%-- <img src="${pageContext.request.contextPath}/resource/img/logo.png"> --%>
		</div>
		<div class="logo_txt">
			后台管理系统
		</div>
		<div class="userInfo">
			<ul>
				<li><i class="fa fa-user"></i></li>
				<li><a class="updMyPwd">${session_user.loginName}</a>&nbsp;&nbsp;&nbsp;</li>
				<li><i class="fa fa-power-off"></i></li>
				<li><a href="${pageContext.request.contextPath}/web/logout">退出</a></li>
			</ul>
		</div>
	</nav>
	<section class="content">
		<div class="left_slim">
			<div id="menu" class="slimScroll">
				<div class="panel-group" id="accordion">
					<div class="panel">
						<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse0">
							<i class="fa fa-user-circle fa-fw parent_icon"></i>&nbsp;&nbsp;用户管理
							<i id="collapse0_icon" class="fa fa-angle-up" circle="1"></i>
						</div>
						<div id="collapse0" class="panel-collapse collapse in">
							<div class="panel-body">
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/sysUser/list">
									<div class="icon"><i class="fa fa-user-circle-o"></i></div>
									<div class="menuName">系统用户</div>
								</div>
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/user/list">
									<div class="icon"><i class="fa fa-user-plus"></i></div>
									<div class="menuName">用户管理</div>
								</div>
							</div>
						</div>
					</div>
                    <div class="panel">
                        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                            <i class="fa fa-home fa-fw parent_icon"></i>&nbsp;&nbsp;商城管理
                            <i id="collapse1_icon" class="fa fa-angle-down" circle="1"></i>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="menuSquare" id="${pageContext.request.contextPath}/web/product/list?viewType=1">
                                    <div class="icon"><i class="fa fa-shopping-cart"></i></div>
                                    <div class="menuName">商品管理</div>
                                </div>
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/product/list?viewType=2">
									<div class="icon"><i class="fa fa-cloud"></i></div>
									<div class="menuName">服务管理</div>
								</div>
                                <%--<div class="menuSquare" id="${pageContext.request.contextPath}/web/product/service/8">
                                    <div class="icon"><i class="fa fa-money"></i></div>
                                    <div class="menuName">冲凉价格</div>
                                </div>
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/product/service/9">
									<div class="icon"><i class="fa fa-cny"></i></div>
									<div class="menuName">造型价格</div>
								</div>--%>
                            </div>
                        </div>
                    </div>
					<div class="panel">
						<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
							<i class="fa fa-archive fa-fw parent_icon"></i>&nbsp;&nbsp;宠物房间
							<i id="collapse2_icon" class="fa fa-angle-down" circle="1"></i>
						</div>
						<div id="collapse2" class="panel-collapse collapse">
							<div class="panel-body">
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/hotel/list">
									<div class="icon"><i class="fa fa-diamond"></i></div>
									<div class="menuName">房间类型</div>
								</div>
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/room/list">
									<div class="icon"><i class="fa fa-home"></i></div>
									<div class="menuName">房号管理</div>
								</div>
                                <div class="menuSquare" id="${pageContext.request.contextPath}/web/order/list">
                                    <div class="icon"><i class="fa fa-gift"></i></div>
                                    <div class="menuName">房间预约</div>
                                </div>
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/monitor/list">
									<div class="icon"><i class="fa fa-video-camera"></i></div>
									<div class="menuName">监控设备</div>
								</div>
							</div>
						</div>
					</div>
					<div class="panel">
						<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
							<i class="fa fa-paw fa-fw parent_icon"></i>&nbsp;&nbsp;宠物管理
							<i id="collapse3_icon" class="fa fa-angle-down" circle="1"></i>
						</div>
						<div id="collapse3" class="panel-collapse collapse">
							<div class="panel-body">
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/pet/list">
									<div class="icon"><i class="fa fa-heart"></i></div>
									<div class="menuName">宠物信息</div>
								</div>
								<div class="menuSquare" id="${pageContext.request.contextPath}/web/relay/list">
									<div class="icon"><i class="fa fa-tasks"></i></div>
									<div class="menuName">预约接送</div>
								</div>
							</div>
						</div>
					</div>
                    <div class="panel">
                        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                            <i class="fa fa-cogs fa-fw parent_icon"></i>&nbsp;&nbsp;设置管理
                            <i id="collapse4_icon" class="fa fa-angle-down" circle="1"></i>
                        </div>
                        <div id="collapse4" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="menuSquare" id="${pageContext.request.contextPath}/web/advert/list">
                                    <div class="icon"><i class="fa fa-photo"></i></div>
                                    <div class="menuName">广告管理</div>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
		<div class="right_slim">
			<iframe id="iframe" name="content" src="" width="100%" height="100%" frameborder="0"></iframe>
		</div>
	</section>

	<div class="modal fade" id="myPwdModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">修改密码</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" name="id">
					<table class="table-hover table table-bordered">
						<tr>
							<td style="background: #eee; text-align: right">账户名</td>
							<td>${session_user.loginName}</td>
						</tr>
						<tr>
							<td style="background: #eee; text-align: right">昵称</td>
							<td>${session_user.name}</td>
						</tr>
						<tr>
							<td style="background: #eee; text-align: right">密码</td>
							<td><input type="password" class="form-control" name="password"
								placeholder="密码"></td>
						</tr>
						<tr>
							<td style="background: #eee; text-align: right">确认密码</td>
							<td><input type="password" class="form-control" name="password2"
								placeholder="确认密码"></td>
						</tr>
						<tr>
							<td align="center" colspan="2">
								<button id="saveMyPwd" type="button" class="btn btn-success"
									style="width: 100px;">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<button id="closeMyPwdModal" type="button"
									class="btn btn-danger" style="width: 100px;">关闭</button>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			$(".right_slim iframe").attr("src",$(".panel-body .menuSquare").eq(0).attr("id"));
			
			$("#saveMyPwd").click(function() {
				var password = $("#myPwdModal input[name=password]").val();
				var password2 = $("#myPwdModal input[name=password2]").val();
				if ($.trim(password) == "") {
					$.messager.alert("密码不能为空");
					return false;
				}
				if ($.trim(password2) == "") {
					$.messager.alert("确认密码不能为空");
					return false;
				}
				if ($.trim(password2) != "" && $.trim(password) != $.trim(password2)) {
					$.messager.alert("二次输入的密码不一致");
					return false;
				}
				$(this).attr("disabled", "disabled");
				$.ajax({
					type : "POST",
					url : "${pageContext.request.contextPath}/web/sysUser/updatePassword",
					data : "t=" + Math.round(999 * Math.random()) + "&password=" + password,
					success : function(result) {
						if (result.code === 0) {
                            $("#saveMyPwd").removeAttr("disabled");
							alert("保存成功");
							location.href = "${pageContext.request.contextPath}/web/logout";
						} else {
							alert(result.msg);
						}
					}
				});
			});
			$(".updMyPwd").click(function() {
				$("#myPwdModal").modal('show');
			});
			$("#closeMyPwdModal").click(function() {
				$("#myPwdModal").modal('hide');
			});
			//折叠菜单事件
			$(".panel-collapse").on('show.bs.collapse', function () {
		         var id = $(this).attr("id");
		         var obj=$("#"+id+"_icon");
		         rotate(obj);
		    });
			$(".panel-collapse").on('hide.bs.collapse', function () {
		         var id = $(this).attr("id");
		         var obj=$("#"+id+"_icon");
		         rotate(obj);
		    }); 
			
			$(".menuSquare").each(function(){
				if($(this).attr("id")==$("iframe").attr("src")){
					$(this).css("color","#ff4c91");
					$(this).css("border-color","#ff4c91");
					return;
				}
			});
			$(".menuSquare").click(function(){
				$(".menuSquare").css("color","");
				$(".menuSquare").css("border-color","");
				$(this).css("color","#ff4c91");
				$(this).css("border-color","#ff4c91");
				
				$(".right_slim iframe").attr("src",$(this).attr("id"));
			});
		});
		//箭头旋转
		function rotate(obj){
			var rotateIndex=parseInt(obj.attr("circle"));
			var rotateDeg=rotateIndex*180;
			var ieRotate=rotateIndex%2;
			if(ieRotate==1){
				ieRotate = 2;
			}else{
				ieRotate = 0;
			}
			obj.css("-moz-transform","rotate("+rotateDeg+"deg)");
			obj.css("-webkit-transform","rotate("+rotateDeg+"deg)");
			obj.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation="+ieRotate+")");
			obj.css("transition","transform 0.5s linear");
			obj.css("-moz-transition","-moz-transform 0.5s linear");
			obj.css("-webkit-transition","-webkit-transform 0.5s linear");
			obj.attr("circle",rotateIndex+1);
		}
	</script>
</body>
</html>